<template>
  <div class="hello">
    <span class="iconfont icon-002-in-love"></span>
    <live2d @live2dItemClick="live2dItemClick" @live2dItemEnter="live2dItemEnter" ref="aaa" :className="className"></live2d>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
data(){
	  return{
		  className: ['iconfont icon-002-in-love', 'iconfont icon-001-sick-1']
	  }
  },
  created() {
  	
  },
  methods: {
	  live2dItemClick(index) {
		  //第一个icon被点击时触发
		  if (index === 0) {
			  this.$refs.aaa.loadOtherModel();
		  }
		  if(index === 1){
			  this.$refs.aaa.loadRandModel();
		  }
	  },
	  live2dItemEnter(index) {
		  if (index === 0) {
		  	this.$refs.aaa.showMessage('呜呜呜 o(╥﹏╥)o 不爱我了吗', 2000, 1000);
		  }
		  if(index === 1){
		  	this.$refs.aaa.showMessage('耶 新衣服新衣服 坏主人不要偷看哦 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄', 2000, 1000);
		  }
		  
	  }
  }
}
</script>

<style>
	
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_2429484_inj7bp1im6b.eot?t=1616055917549'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2429484_inj7bp1im6b.eot?t=1616055917549#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('//at.alicdn.com/t/font_2429484_inj7bp1im6b.woff?t=1616055917549') format('woff'),
  url('//at.alicdn.com/t/font_2429484_inj7bp1im6b.ttf?t=1616055917549') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_2429484_inj7bp1im6b.svg?t=1616055917549#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-002-in-love:before {
  content: "\e6d3";
}

.icon-001-sick-1:before {
  content: "\e6d4";
}

.icon-003-scared:before {
  content: "\e6d5";
}

.icon-009-hello:before {
  content: "\e6d6";
}
</style>
